<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/highcharts.js"></script>
    <script type="text/javascript">
        document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="./css/chart.css?v=' + new Date().getTime() + '"%3E'))
        document.write(unescape('%3Cscript src="./js/AdminChart.js?v=' + new Date().getTime() + '" type="text/javascript" %3E%3C/script%3E'));
    </script>
</head>
<body>
<button id="test">test</button>
<div style="margin: 20px;border: 1px solid #ccc;">
    <div id="chart" style="width: 100%;height: 500px;"></div>
</div>
<script type="text/javascript">
    var colors = ['#92c360','#c36083', '#7360c3', '#00a0e9' ];
    var startTime = new Date().getTime() - 6*24*60*60*1000;
    var endTime = new Date().getTime();
    var data = [
        {
            name:'排队量',
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, colors[0]],
                    [1, Highcharts.Color(colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            data:(function(){
                var arr = [];
                for(var i=0;i<7;i++){
                    arr.push(parseInt(Math.random()*10))
                }
                return arr;
            })()
        }
    ];
    var series = [];
    for(var i in data){
        var clone = AdminChart.Utils.cloneObj(data[i]);
        var color = colors[i];
        clone.color = colors[i];
        series.push(clone);
    }
    var chart = AdminChart.LineChart('chart', {
        chart: {
            type: 'area'
        },
        legend: {
            enabled:false
        },
        xAxis:{
            lineColor: '#ccc',
            min:0,
            labels:{
                formatter:function () {
                    var v = parseInt(this.value);
                    var t = new Date(startTime + v*24*60*60*1000);
                    var m = t.getMonth() + 1;
                    var d = t.getDate();
                    return AdminChart.Utils.setZero(m) + '.' + AdminChart.Utils.setZero(d)
                }
            }
        }
    }, series);

    $('#test').click(function(){
        startTime = new Date().getTime() - 30* 24 * 3600 * 1000;
        var t = (function(){
            var arr = [];
            for(var i=0;i<26;i++){
                arr.push(parseInt(Math.random()*10))
            }
            return arr;
        })();
        chart.series[0].setData(t);
        chart.xAxis[0].update({
            minTickInterval:1,
            endOnTick:true
        });
    })

</script>
</body>
</html>